<template>

      <div class="table">

       <el-form :model="dataForm"  ref="formData3">
        <div class="table_title td_color">房产信息<el-button class="add_left"  type="text" v-if="dataForm.houseVos.length < 3" @click="addRowHouse()">添加</el-button></div>
        <table
          v-for="(item,index) in dataForm.houseVos"
          :key="item.key"
          :class="[
          index > 0 ? 'table_wrap_top_none' : 'table_wrap'
          ]">
          <tbody>
            <tr>
              <td rowspan="5" class="table_td">
                  第{{index+1  | numberFilter}}套<br/><el-button type="text" v-if="index>0" @click="removeRowHouse(index,item.id)">删除</el-button>
              </td>
              <td class="table_td">
                  <span class="td_check_red">*</span>不动产权证号
                  <div style="font-size: 1px;color: red">提示：如果有多个，请用英文逗号分隔，不能包含空格</div>
              </td>
              <td class="table_td">
                  <el-input placeholder="不动产权证号" v-model="item.licenseNo" maxlength="20" show-word-limit/>
              </td>
              <td class="table_td">
                  <span class="td_check_red">*</span>不动产面积
              </td>
              <td class="table_td">
                  <el-input placeholder="不动产面积" v-model="item.areaTotal"  maxlength="7"/>
              </td>
            </tr>
            <tr>
              <td class="table_td"><span class="td_check_red">*</span>不动产坐落</td>
              <td class="table_td">
                <el-cascader
                  v-model="item.houseAddressRegionValues"
                  :options="regionList"
                  clearable
                  placeholder="请选择不动产坐落地址"
                  :props="{ expandTrigger: 'hover' }"
                  style="width:100%;">
                </el-cascader>
              </td>

              <td class="table_td"><span class="td_check_red">*</span>详细地址</td>
              <td class="table_td"><el-input placeholder="详细地址" v-model="item.addressDetail"  maxlength="30" show-word-limit/></td>
            </tr>
            <tr>
              <td class="table_td">
                  <span class="td_check_red">*</span>不动产权是否有质押
              </td>
              <td class="table_td">
                <el-select v-model="item.hasPledge" placeholder="请选择" style="width:100%;">
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </td>
              <td class="table_td">
                  不动产权抵押权人
              </td>
              <td class="table_td">
                  <el-input placeholder="不动产权抵押权人"  v-model="item.pledgerName"/>
              </td>
            </tr>
            <tr>
              <td class="table_td">不动产抵押金额</td>
                <td class="table_td"><el-input placeholder="不动产抵押金额" v-model="item.mortgageAmount"><template slot="append">元</template></el-input></td>
              <td class="table_td">
                  <span class="td_check_red">*</span>不动产类型
              </td>
              <td class="table_td">
                <DicSelect dictType = "不动产类型" :dictValue="item.estateType" v-on:dictValue="item.estateType = $event"/>
              </td>
            </tr>
            <tr>
              <td class="table_td">
                  <span class="td_check_red">*</span>不动产行政区划
              </td>
              <td class="table_td">
                <el-cascader
                    v-model="item.districtRegionCodes"
                    :options="regionList"
                    clearable
                    placeholder="请选择不动产行政区划"
                    :props="{ expandTrigger: 'hover' }"
                    style="width:100%;">
                </el-cascader>
              </td>
              <td class="table_td" colspan="2">
              </td>
            </tr>
          </tbody>
        </table>

<!--第二个表格-->
      <div class="table_title td_color">汽车信息<el-button class="add_left"  type="text" v-if="dataForm.carInfoVos.length < 3"  @click="addRowCarInfo()">添加</el-button></div>
        <table class="table_wrap">
          <tbody>
            <tr
          v-for="(item,index) in dataForm.carInfoVos"
          :key="item.key"
  >
              <td class="table_td">
                 第{{index+1  | numberFilter}}辆
                 <el-button class="add_left"  type="text" @click="removeRowCarInfo(index,item.id)">删除</el-button>
              </td>
              <td class="table_td"><span class="td_check_red">*</span>车牌号</td>
              <td class="table_td"><el-input placeholder="车牌号" v-model="item.numberPlate" maxlength="10" show-word-limit/></td>

              <td class="table_td"><span class="td_check_red">*</span>品牌</td>
              <td class="table_td"><el-input placeholder="品牌" v-model="item.brand" maxlength="10" show-word-limit/></td>
            </tr>

          </tbody>
        </table>
<!--第三个表格-->
      <div class="table_title td_color">金融地产<el-button class="add_left"  type="text" v-if="dataForm.monetaryAssetsVos.length < 3" @click="addRowAssets()">添加</el-button></div>
        <table class="table_wrap">
          <tbody>
            <tr
          v-for="(item,index) in dataForm.monetaryAssetsVos"
          :key="item.key"
  >
              <td class="table_td">
                 {{index+1}}
                 <el-button class="add_left" type="text" @click="removeRowAssets(index,item.id)">删除</el-button>
              </td>
              <td class="table_td"><span class="td_check_red">*</span>资产名称</td>
              <td class="table_td"><el-input placeholder="资产名称" v-model="item.assetName" maxlength="30" show-word-limit/></td>

              <td class="table_td"><span class="td_check_red">*</span>资产价值</td>
              <td class="table_td">
                <el-input  placeholder="资产价值" v-model="item.assetValue" maxlength="8"><template slot="append">万元</template></el-input>
              </td>
            </tr>
          </tbody>
        </table>
       </el-form>
        <div style="width:25%;margin:0 auto;margin-top:30px;">
            <el-button type="primary" @click="backHandle"  style="width:120px" v-if="isProjectSubmit">上一步</el-button>
            <el-button type="warning" @click="updateData" style="width:120px" v-if="isProjectSubmit">下一步</el-button>
            <el-button type="warning" v-else @click="updateData" style="width:150px;height:40px;margin-left:20px;" v-if="isTaskProcessing != undefined && isTaskProcessing == true"  v-permission="'system:credit-loan-house-info-save:access'">保存</el-button>
<!--            <el-button type="warning" v-else @click="updateData" style="width:150px;height:40px;margin-left:20px;" v-permission="'system:credit-loan-house-info-save:access'">保存</el-button>-->
        </div>
      </div>
    </div>
</template>

<script>
const numberMap = {
  1: '一',
  2: '二',
  3: '三',
  4: '四',
}
import { createAsset,createAssetDraft,selectAsset,deleteAssets} from '@/api/assets'
import DicSelect from '@/components/select'
import { listRegion, detailByAreaId } from '@/api/region'
  export default {
    components: { DicSelect },
    props:{
      isTaskProcessing: undefined,
      isProjectSubmit: undefined,
      projectId: undefined,
      changeValue: undefined,
      operationLook: undefined,
      projectStatus: undefined
    },
  filters: {
    numberFilter(index) {
      return numberMap[index]
    }
  },
    data () {
      return {
         defaultChangeValue: this.changeValue,
         defaultProjectId: undefined,
         dataForm:{
           projectId: undefined,
           houseVos:[{
             propertyOwner: undefined,
             estateType: undefined,
             areaTotal: undefined,
             licenseNo: undefined,
             districtRegionCodes: [],
             provinceId: undefined,
             districtRegionCode: undefined,
             cityId: undefined,
             areaId: undefined,
             located: undefined,
             hasPledge: undefined,
             mortgageAmount: undefined,
             houseAddressRegionValues:[],
             key: Date.now()

           }],
           carInfoVos:[{
             numberPlate: undefined,
             brand: undefined,
             key: Date.now()
           }],
           monetaryAssetsVos:[{
             assetName: undefined,
             assetValue: undefined,
             key: Date.now()
           }]
         },
         regionList: [],
         capitalList:[],
         chooseList:[]
      }
    },
    created: function() {
      this.defaultProjectId = this.$route.query.projectId
      if (this.defaultProjectId === undefined){
        this.defaultProjectId = localStorage.getItem('projectId');
      }
      this.findAssets()
      this.getRegionList()
    },
    methods: {
      findAssets() {
       selectAsset({projectId:this.defaultProjectId}).then(response => {
          if(response.data != undefined ) {
            this.dataForm = response.data
            //如果房产为空 则添加一行
            if(this.dataForm.houseVos.length==0) {
              this.addRowHouse()
            }
            this.dataForm.projectId = this.defaultProjectId
            this.dataForm.houseVos.forEach(function(item){
              if(item.provinceId!=undefined && item.provinceId!=""){
                item.houseAddressRegionValues = []
                item.houseAddressRegionValues[0] = item.provinceId
                item.houseAddressRegionValues[1] = item.cityId
                item.houseAddressRegionValues[2] = item.areaId
              }
              if(item.districtRegionCodeArr != undefined && item.districtRegionCodeArr.length > 0){
                item.districtRegionCodes = []
                item.districtRegionCodeArr.forEach(function(areaItem){
                  item.districtRegionCodes.push(areaItem.areaCode);
                })
              }
            })
          }
        })
        .catch(() => {
          this.dataForm = undefined
        })
    },
    getRegionList() {
      listRegion().then(response => {
          if (response.data != undefined) {
            this.regionList = response.data;
          }
        }).catch(() => {});
    },
    updateData(){
      this.dataForm.houseVos.forEach(function(item,index){
        if(item.houseAddressRegionValues!=undefined && item.houseAddressRegionValues.length>0){
          item.provinceId = item.houseAddressRegionValues[0]
          item.cityId = item.houseAddressRegionValues[1]
          item.areaId = item.houseAddressRegionValues[2]
        }
        if(item.districtRegionCodes != undefined && item.districtRegionCodes.length>0){
          item.districtRegionCode = item.districtRegionCodes[item.districtRegionCodes.length-1]
        }
      })
      createAsset(this.dataForm).then(response => {
          this.$notify.success({title: '成功',message: '保存成功'})
          //跳转到下个页面
           if( this.defaultChangeValue != 'detail' ) {
              this.$emit("stepChanged",3)
            }
           }).catch(response => {
        })
    },
    backHandle(){
       if( this.defaultChangeValue != 'detail' ) {
          this.$emit("stepChanged",1)
        }
    },
    addRowHouse() {
      this.dataForm.houseVos.push({
             propertyOwner: undefined,
             estateType: undefined,
             areaTotal: undefined,
             licenseNo: undefined,
             provinceId: undefined,
             cityId: undefined,
             areaId: undefined,
             located: undefined,
             hasPledge: undefined,
             mortgageAmount: undefined,
             key: Date.now()
      });
    },
    addRowCarInfo() {
      this.dataForm.carInfoVos.push({
             numberPlate: undefined,
             brand: undefined,
             key: Date.now()
      });
    },
    addRowAssets() {
      this.dataForm.monetaryAssetsVos.push({
             assetName: undefined,
             assetValue: undefined,
             key: Date.now()
      });
    },
    // 删除房产属性列
    removeRowHouse(index,id) {
      this.dataForm.houseVos.splice(index, 1);
      this.deleteData("HOUSE",id)

    },
    // 删除汽车属性列
    removeRowCarInfo(index,id) {
      this.dataForm.carInfoVos.splice(index, 1);
      this.deleteData("CAR",id)
    },
    // 删除金融资产属性列
    removeRowAssets(index,id) {
      this.dataForm.monetaryAssetsVos.splice(index, 1);
      this.deleteData("ASSETS",id)
    },
    //根据stepEnum枚举区分要删除的模块
    deleteData(stepEnum,id){
      if(id != undefined) {
        deleteAssets({dataType:stepEnum,id:id}).then(res => {
          this.$notify.success({title: '成功',message: '删除成功'})
        }).catch(() => {

        })
      }
    }
    },
  }
</script>

<style>
.table .el-input.is-disabled .el-input__inner {
  background: #fff;
  color:#606266;
  border-color:#fff;
  cursor: default;
}
.table .el-input__inner{
  height:52px;
  line-height: 55px;
  border:0px solid;
}

.table .el-input-group__append{
  border:0px solid;
}

.table {
  background-color: #FFFFFF;
  font-size: 14px;
  width: 95%;
  margin:0 auto;
}
.table tr{
  border:0px solid;

}
.table_title{
  background-color: #F2F2F2;
  border-top: 0px solid #c7c7c7;
  border-right: 0px solid #c7c7c7;
  border-left: 0px solid #c7c7c7;
  width: 100%;
  padding-left: 20px;
  line-height: 50px;
}
.table_wrap{
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;

}
.table_wrap_top_none{
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;
  margin-top:3px;

}

.table_td {
  text-align: center;
  line-height: 50px;
  min-width: 90px;
  border: 1px solid #c7c7c7;
}
.td_check_red{
  color: red;
}
.add_left {
  margin-left: 20px;
}
.td_color{
  background-color: #f4f4f4;
}

</style>
